<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth.js';
import {useRoute, useRouter} from 'vue-router'
const route = useRoute();
const router = useRouter();

const formRef = ref(null);  
const loginForm = ref({
  username: '',  // 用户名
  password: ''   // 密码（
});

const isPwdVisible = ref(false); // 控制密码是否可见（默认隐藏：false）
const togglePwdVisibility = () => { isPwdVisible.value = !isPwdVisible.value; }; // 切换状态

// 表单校验规则
const formRules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],  // 失去焦点校验
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
});

const authStore = useAuthStore();
// 登录
const handleLogin = async () => {
    await formRef.value.validate();

    const res = await authStore.login(loginForm.value);
    // console.log('res：', res.data.role); 
    // 登录后，管理员跳到后台或原页面，用户跳到前台或原页面
    if(res.data.role === 'USER') {
      router.push(route.query.redirect || '/');
    }else if(res.data.role === 'ADMIN') {
      router.push(route.query.redirect || '/back');
    }
};

</script>

<template>
    <el-form 
      ref="formRef"
      :model="loginForm"
      :rules="formRules"
      label-width="0px" 
      class="login-form-container"
    >
        <!-- 登录表单区域 -->
        <div class="login-form">
          <strong class="login-title">登录</strong>
  
          <!-- 账号输入框 -->
          <el-form-item prop="username" class="form-item">
            <div class="input-box" :class="{ 'focused': isUsernameFocused }">
              <img src="/icon/user-brown.png" alt="用户名图标" class="icon-img-left">
              
              <el-input
                v-model="loginForm.username"
                placeholder="请输入您的账号"
                class="input-inner"
                @focus="isUsernameFocused = true"
                @blur="isUsernameFocused = false"
              />
            </div>
        </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item prop="password" class="form-item">
            <div class="input-box" :class="{ 'focused': isPasswordFocused }">
              <img src="/icon/password.png" alt="密码图标" class="icon-img-left">
              <el-input
                v-model="loginForm.password"
                :type="isPwdVisible ? 'text' : 'password'"
                placeholder="请输入密码"
                class="input-inner"
                @focus="isPasswordFocused = true"
                @blur="isPasswordFocused = false"
              />
              <img 
                :src="isPwdVisible ? '/icon/look.png' :'/icon/unlook.png' " 
                alt="密码显示切换" 
                width="20px"
                height="20px"
                @click="togglePwdVisibility"
                class="icon-img-right"
              >
            </div>
        </el-form-item>

          <!-- 链接：立即注册+忘记密码 --> 
          <div class="form-link">
            <a href="/user/register" class="register-link">立即注册</a>
            <!-- <a href="#" class="forgot-password" @click.prevent="handleForgotPwd">忘记密码？</a> -->
          </div>
        </div>
  
        <!-- 登录按钮 -->
        <div class="login-button"> 
          <el-button
            @click="handleLogin"
            :loading="isLoading"
          >
            <span>立即登录</span>
          </el-button>
        </div>
    </el-form>
</template>
<style scoped>
.login-form-container {
  width: 100%;
  max-width: 500px; 
  margin: 0 auto;
}
.login-form {
  margin-top: 84px;
  padding: 0 56px;
}
.login-title {
  font-size: 22px;
  line-height: 31px;
  color: #2B2B2B;
}
.form-item {
  margin-bottom: 0; 
}
.input-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
  width: 100%; 
  height: 52px;
  background: #FAFAFA;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 0.3s;
}
.icon-img-left {
  width: 20px;
  height: 20px;
  margin-left: 16px;
}
.icon-img-right {
  width: 20px;
  height: 20px;
  margin-right: 16px;
}

/* 链接 */
.form-link {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
}
.form-link .register-link {
  color: #8D8C8C;
}
.form-link .forgot-password {
  color: #4077FB;
}

/* 登录按钮 */
.login-button {
  width: 378px;
  height: 52px;
  line-height: 52px;
  margin: 0 auto;
  margin-top: 134px;
}
.login-button button{
  width: 100%;
  height: 100%;
  text-align: center;
  background: #4077FB;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 20px;
}

/* 输入框聚焦样式 */
.input-box.focused {
  border: 1px solid #4077FB;
}

/* 输入框占位符颜色 */
:deep(.input-inner .el-input__inner)::placeholder {
  color: #AAB1BA;
}

/* 清除Element输入框默认样式 */
:deep(.input-inner .el-input__inner) {
  border: none;
  padding: 0;
  background: transparent;
  height: 100%;
}
:deep(.input-inner .el-input__wrapper) {
  box-shadow: none;
  background: transparent;
  padding: 0;
}
:deep(.input-inner .el-input__suffix) {
  display: none;
}
/* 清除Element Plus表单错误状态的边框/样式 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  border: none !important; /* 去掉输入框错误边框 */
  box-shadow: none !important;
}
:deep(.el-form-item.is-error) {
  border: none !important; /* 去掉表单项错误边框 */
}
</style>